<template>
    <div class="content-section">
      <h3>Forgot password</h3>
      <a-form
          :model="formData"
          name="basic"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 24 }"
          autocomplete="off"
          @finish="onFinish"
      >
        <a-form-item name="email" :rules="rules.email">
          <div  class="form-group">
            <a-input type="email" v-model:value="formData.email" class="custom-input" placeholder="Email" allowClear />
          </div>
        </a-form-item>
         <!-- 验证码输入 -->
         <a-form-item>
          <div class="form-group">
            <a-space>
                <a-input
                v-model:value="formData.code"
                placeholder="Enter verification code"
                class="custom-input"
                allowClear
                />
                <a-button
                :disabled="isCounting"
                @click="sendVerificationCode"
                :class="{ disabled: isCounting }"
                >
                {{ countdown > 0 ? `${countdown}s` : "Send Code" }}
                </a-button>
            </a-space>
          </div>
        </a-form-item>
        <a-form-item name="password" :rules="rules.password">
          <div  class="form-group">
            <a-input type="password" v-model:value="formData.password" class="custom-input" placeholder="Password" allowClear />
          </div>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 24 }">
          <a-button class="signIn" type="primary" html-type="submit">Submit</a-button>
        </a-form-item>
        <div @click="siginUp" class="signup"><LeftOutlined /> Back to sign in</div>
        <!-- <button class="submit-btn">Sign in</button> -->
      </a-form>

    </div>
  </template>

  <script lang="ts" setup>
  import { ref ,reactive,defineEmits} from 'vue'
  import SVG_ICONS from "../../../assets/SVG_ICONS"
  import type { Rule } from 'ant-design-vue/es/form'
  import { getSendEmailCode ,getverify} from "@/api/user";
  import { useRouter } from "vue-router";
  import { useUserStore } from "@/store/user";
  import { message } from "ant-design-vue";
  const emit = defineEmits(['switch-nav']);
  const router = useRouter();
  const userStore = useUserStore();
     // 倒计时相关
  const countdown = ref(0);
  const isCounting = ref(false);
  let timer: any = null;
  interface formData {
    email: string;
    password: string;
    code: string;
  }
  const formData = reactive<formData>({
    email: "",
    password: "",
    code: "",
  });
  // 用于表单的状态对象
  const formState = reactive({});
  const rules: Record<string, Rule[]> = {
    email: [
      { required: true, message: "Please enter your email address" },
      { type: "email", message: "Please enter the correct email format" },
    ],
    code: [{ required: true, message: "Please enter the verification code" }],
    password: [
      { required: true, message: "Please input a password" },
      // { len: 8, message: "The password length must be 8 digits" },
    ],
  };



  // 发送验证码
  const sendVerificationCode = async () => {
    if (!formData.email) {
      message.warning('Please enter email.');
      return;
    }
    // 开始倒计时
    isCounting.value = true;
    countdown.value = 60;
    timer = setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) {
        if (timer) clearInterval(timer);
        isCounting.value = false;
      }
    }, 1000);
    await getSendEmailCode(formData.email).then((res) => {
      if (res.code === 200) {
        message.success('This is a success message');
      } else {
        const msg = res.msg
        message.error(msg);
      }
    });

  };
  const siginUp = async () => {
    emit('switch-nav', 'signin');
  }

  // 提交表单
  const onFinish = async () => {
    try {
      if (!formData.email || !formData.password || !formData.code) {
        message.warning('Please fill in all required fields');
        return;
      }
      // 这里可以添加密码重置逻辑
      message.success('Password reset request submitted');
      await getverify(formData).then((res) => {
      if (res.code === 200) {
        message.success('Congrats, this is a success message.');
        emit('switch-nav', 'signin');
      } else {
        const msg = res.msg
        message.error(msg);
      }
    });

    } catch (error) {
      console.error('Form submission error:', error);
      message.error('Failed to reset password');
    }
  };


  </script>

  <style lang="scss" scoped>
  .content-section {
    animation: fadeIn 0.3s ease;
  }

  .form-group {
    margin-bottom: 20px;
  }

  .custom-input {
    // width: 370px;
    height: 40px;
    border-radius: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #71767f;
    transition: border-color 0.3s ease;
  }
  .signup{
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    //下滑线
    text-decoration: underline;
  }
  /* 覆盖ant-design默认的focus样式，但保留下边框 */
  :deep(.ant-input:focus),
  :deep(.ant-input-focused),
  :deep(.ant-input-affix-wrapper:focus),
  :deep(.ant-input-affix-wrapper-focused) {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
     /* 焦点状态时下边框颜色可以稍深 */
    box-shadow: none !important;
    outline: none;
  }

  /* 覆盖hover状态的样式 */
  :deep(.ant-input:hover),
  :deep(.ant-input-affix-wrapper:hover) {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    /* border-bottom: 1px solid #71767f !important; */
    box-shadow: none !important;
  }

  a-input {
    width: 100%;
    padding: 12px;
    border: none;
    border-bottom: 1px solid #71767f;
    /* border-radius: 4px; */
    font-size: 14px;
  }

  .signIn {
    width: 100%;
    padding: 20px;
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    cursor: pointer !important;
    pointer-events: auto !important;
    background-color: #71767f; /* 使用Ant Design的主色 */
  }

  /* 覆盖Ant Design组件内部样式 */
  :deep(.signIn) {
    pointer-events: auto !important;
  }

  :deep(.ant-btn) {
    pointer-events: auto !important;
  }

  .signIn:hover {
    background-color: #000;
  }
  .forgot-password {
    display: flex;
    align-items: center;
    justify-content: left;
  }
  .forgot-password-text {
    font-size: 14px;
    color: #000;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    margin-left: 10px;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  :where(.css-dev-only-do-not-override-12unj27).ant-btn-default {
    width:100%;
    background-color: #71767f;
    border-color: #d9d9d9;
    color:#fff;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
}
:where(.css-dev-only-do-not-override-12unj27).ant-btn-default:not(:disabled):hover {
    color: #fff;
    background-color: #000;
}
  </style>
